import React from 'react'
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom';
import './my.css'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

class Myshoucang extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			userid: localStorage.getItem("userid"),
			res: [],
			ressui: [],
  	    };
    }
	
	componentDidMount() {
		//查收藏的所有文章
		fetch('http://62.234.30.197:8088/article/idchalike', {
			method: 'post',
			body: JSON.stringify({'userid':`${this.state.userid}`}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			//console.log(res)
			this.setState({
				res: res
			});
		})
		//查收藏的所有随笔
		fetch('http://62.234.30.197:8088/topics/idchalike', {
			method: 'post',
			body: JSON.stringify({'userid':`${this.state.userid}`}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			//console.log(res)
			this.setState({
				ressui: res
			});
		})
	}
	
    render () {
		const tabs = [
		  { title: <Badge text={''}>我收藏的随笔</Badge> },
		  { title: <Badge text={''}>我收藏的文章</Badge> },
		];
		return (
        <div>
        	<div className='Mymsgsetnamesig-top'>
        		<span className='my-return' onClick={() => this.props.history.push('/Mymsg')}>&lt;</span>
        		<span className='my-setnamesig-top'>我的收藏</span>
        	</div>
			
			 <div>
			    <Tabs tabs={tabs}
			      onChange={(tab, index) => { console.log('onChange', index, tab); }}
			      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
			    >
			      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '', backgroundColor: '#fff' }}>
			        <div><ul>{
			        	this.state.ressui.map((item, idx) => {
			        		var userid = `${item.userid}`;
			        			return <NavLink key={idx} to={{pathname:'/notemsg/:' + item.topicsid, state: {item:item}}}>,
			        			<li className='book-show' key={idx}>
			        				<div className='' className='my-namesig-box'>
			        					<img src={item.pic} className='my-suibi-pic'/>
			        					<br /><div className='item-txt'>{item.txt}</div>
			        					<span>喜欢{item.likecount}</span>
			        					
			        					<button className='btn-shan' onClick={(e) => {
											e.stopPropagation();
											e.nativeEvent.stopImmediatePropagation();
											e.preventDefault();
			        						fetch('http://62.234.30.197:8088/topics/userdellike', {
			        							method: 'post',
			        							body: JSON.stringify({'topicsid':`${item.topicsid}`,'userid':`${this.state.userid}`}),
			        							headers: {
			        							    "Access-Control-Allow-Origin":"*",
			        							    'content-type': 'application/json'
			        							},
			        							mode: 'cors'
			        						})
			        						.then(res=>res.json())
			        						.then(res=> {
			        							//console.log(res)
			        						})
			        						window.location.reload(true)
			        					}}>取消收藏</button>
			        				</div>
			        				<br /><br />
			        			</li>
			        			</NavLink>
			        	})
			        }</ul></div>
			      </div>
				  
				  
			      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '', backgroundColor: '#fff' }}>
					<div><ul>{
						this.state.res.map((item, idx) => {
							var userid = `${item.userid}`;
							return <NavLink key={idx} to={{pathname:'/Detail/:' + item.articleid, state: {item:item}}}>
								<li className='wen-show' key={idx}>
									<div className=' my-wen-box'>
										<img src={item.pic} className='my-wen-pic'/>
										<br /><span>{item.title}</span><br /><br />
										<span>喜欢{item.thumb}</span>
										<button className='btn-shan-wen' onClick={(e) => {
											e.stopPropagation();
											e.nativeEvent.stopImmediatePropagation();
											e.preventDefault();
											fetch('http://62.234.30.197:8088/article/userdellike', {
												method: 'post',
												body: JSON.stringify({'articleid':`${item.articleid}`,'userid':`${this.state.userid}`}),
												headers: {
												    "Access-Control-Allow-Origin":"*",
												    'content-type': 'application/json'
												},
												mode: 'cors'
											})
											.then(res=>res.json())
											.then(res=> {
												//console.log(res)
											})
											window.location.reload(true)
										}}>取消收藏</button>
									</div>
								</li>
							</NavLink>
						})
					}</ul></div>
					
			      </div>
			    </Tabs>
			    <WhiteSpace />
			    
			  </div>
			  
			  <div style={{height:'300px'}}></div>
        </div>
    )
  }
}
export default Myshoucang

// <button onClick={this.topicschaall}>查所有的随笔</button><br /><br />
// 			<button onClick={this.topicschangelikecount}>topics=44的随笔数+1</button><br /><br />
// 			<button onClick={this.topicszeng}>增加随笔</button><br />
// 			<div id="container"></div>
//查所有随笔
	// topicschaall = () => {
	// 	//
	// 	//console.log('topicschaall');
	// 	fetch('http://62.234.30.197:8088/topics/chaall', {
	// 		method: 'post',
	// 		headers: {
	// 		    "Access-Control-Allow-Origin":"*",
	// 		    'content-type': 'application/json'
	// 		},
	// 		mode: 'cors'
	// 	})
	// 	.then(res=>res.json())
	// 	.then(res=> {
	// 		//console.log(res)
	// 		var _html = ``;
	// 		res.forEach( (item) => {
	// 			//_html += `<span>txt:  ${item.txt}</span><br />`;
	// 			_html += `<span>userid:  ${item.userid}</span><br />`;
	// 			_html += `<span>topicsid:  ${item.topicsid}</span><br />`;
	// 			_html += `<span>bookname:  ${item.bookname}</span><br />`;
	// 			_html += `<span>type:  ${item.type}</span><br />`;
	// 			_html += `<span>name:  ${item.name}</span><br />`;
	// 			//_html += `<span>pic:  ${item.pic}</span><br />`;
	// 			//_html += `<span>时间:  ${item.writedate}</span><br />`;
	// 			_html += `<span>点赞数:  ${item.likecount}</span><br /><br /><br /><br />`;
	// 			//_html += `<span>topicsid:  ${item.topicsid}</span><br /><br /><br />`;
	// 		} );
	// 		//$("#container").html( _html );
	// 		document.getElementById('container').innerHTML = _html;
	// 	})
	// }
	// //增加新的随笔
	// topicszeng = () => {
	// 	//console.log('topicszeng');
	// 	fetch('http://62.234.30.197:8088/topics/zeng', {
	// 		method: 'post',
	// 		body: JSON.stringify({'txt':'Be good enough. In order to catch the surprises and opportunities given by God.',
	// 								'pic':'http://qkpa8y0ib.hb-bkt.clouddn.com/pic2.jpg',
	// 								'userid':23,
	// 								'bookname':'全员恶人',
	// 								'type':'猪',
	// 								'name':'神某人'}),
	// 		headers: {
	// 		    "Access-Control-Allow-Origin":"*",
	// 		    'content-type': 'application/json'
	// 		},
	// 		mode: 'cors'
	// 	})
	// 	.then(res=>res.json())
	// 	.then(res=> {
	// 		//console.log(res)
	// 	})
	// }
	// topicschangelikecount = () => {
	// 	//console.log('topicschangelikecount');
	// 	fetch('http://62.234.30.197:8088/topics/likecount', {
	// 		method: 'post',
	// 		//`${this.state.userid}`
	// 		body: JSON.stringify({'topicsid':'44','userid':'1'}),
	// 		headers: {
	// 		    "Access-Control-Allow-Origin":"*",
	// 		    'content-type': 'application/json'
	// 		},
	// 		mode: 'cors'
	// 	})
	// 	.then(res=>res.json())
	// 	.then(res=> {
	// 		//console.log(res)
	// 	})
	// }